<template>
  <div class="box-top">
    <el-row>
      <el-col :span="10"
        ><div class="grid-content bg-purple">
          <img class="box-logo" src="../assets/image/logo.jpg" @click="$router.push('/')" alt="" />
          <i class="box-title">Pet shop</i>
        </div></el-col
      >
      <el-col :span="14"
        ><div class="grid-content bg-purple-light">
          <el-menu class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1" @click="$router.push('/')">店铺首页</el-menu-item>
            <!-- <el-submenu index="2">
              <template slot="title">宠物分类</template>
              <el-menu-item index="2-1">狗狗</el-menu-item>
              <el-menu-item index="2-2">猫咪</el-menu-item>
            </el-submenu> -->
            <el-menu-item index="2" @click="$router.push('/search')"
              ><i class="el-icon-search"></i>搜你喜欢</el-menu-item
            >
            <el-menu-item index="3" @click="$router.push('/pet/care')">宠物美容 </el-menu-item>
            <el-menu-item index="4" @click="$router.push('/notice')">最新公告</el-menu-item>
            <el-menu-item index="5" @click="userLogin">{{
              $store.state.user.account ? '用户中心' : '用户登陆'
            }}</el-menu-item>
            <el-menu-item index="6" @click="$router.push('/admin')">管理员登陆</el-menu-item>
          </el-menu>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'HeaderView',
  data() {
    return {}
  },
  methods: {
    userLogin() {
      const token = sessionStorage.getItem('token')
      if (!token) {
        this.$router.push('/login')
      } else {
        this.$router.push('/user')
      }
    },
  },
}
</script>

<style scoped>
.box-logo {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.box-title {
  font-size: 30px;
  line-height: 30px;
}
</style>
